@import '../../style/themes';
@import '../../style/mixins';

.x-switch {
  @include reset-component();
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: default;
  background: transparent;

  &:hover &_core {
    border-color: further($switch-border-color, 10);
    &::after {
      background: further($switch-border-color, 10);
    }
  }

  &_core {
    @include reset-component();
    position: relative;
    display: inline-block;
    width: $switch-width;
    height: $switch-height;
    border: $switch-border-width $switch-border-color $switch-border-style;
    border-radius: $switch-height;
    background: $switch-bg;
    &::after {
      content: ' ';
      height: $switch-core-width;
      width: $switch-core-width;
      border-radius: 10px;
      position: absolute;
      left: 2px;
      top: 50%;
      background: $switch-border-color;
      transform: translate(0, -50%);
      transition: left .2s;
    }
  }

  &-text {
    margin-left: $margin-sm - 2;
    line-height: 1;
  }

  &-checked:hover &_core {
    border-color: transparent;
    background: further($switch-checked-bg, 4.5);
    &::after {
      content: ' ';
      background: #fff;
    }
  }

  &-checked &_core {
    border-color: transparent;
    background: $switch-checked-bg;
    &::after {
      content: ' ';
      left: $switch-width - $switch-core-width - $switch-border-width*2 - 2;
      background: #fff;
    }
  }

  &:active &_core {
    border-color: transparent;
    background: further($gray, 7);
    &::after {
      background: #fff;
    }
  }

  &-disabled {
    opacity: .5;
    filter: grayscale(100%);
    pointer-events: none;
  }
  &-disabled &_core {
    &::after {
      background: further($gray, 9) !important;
    }
  }
}